<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<title>sku</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>
	<body>
		<div id="app" v-cloak>
			<!-- 规格设置 -->
			<div class="specification">
				<ul class="spec-list" v-if="specification&&specification.length>0">
					<li class="item" v-for="(item, index) in specification" :key="index">
						<div class="name">
							<input class="input" v-model="item.name" placeholder="输入产品规格" />
							<span class="deleteIcon" @click="delSpec(index)">×</span>
						</div>
						<div class="values">
							<span class="tag" v-for="(tag, num) in item.value" :key="tag">
								<span>{{tag}}</span>
								<span class="closeIcon" @click="delSpecTag(index, num)">×</span>
							</span>
							<div class="add-attr">
								<input class='input addSku' v-model="addValues[index]" placeholder="多个产品属性以空格隔开" @keyup.enter="addSpecTag(index)"
								 @blur.prevent="addSpecTag(index)" />
								<span class="addIcon" @click="addSpecTag(index)">+</span>
							</div>
						</div>
					</li>
				</ul>
				<div class="add-spec">
					<button class="addSkuBtn" :disabled="specification.length >= 10" @click="addSpec">添加规格项目<button>
				</div>
			</div>



			<!-- 实战DEMO -->
			<div class="example">
				<table class="stock-table" cellspacing="0" cellpadding="0">
					<thead>
						<tr>
							<th v-for="(item, index) in specification" :key="index">
								{{item.name}}
							</th>
							<th>价格</th>
							<th>库存</th>
						</tr>
					</thead>
					<tbody v-if="specification[0] && specification[0].value.length">
						<tr :key="index" v-for="(item, index) in countSum(0)">
							<td v-for="(n, specIndex) in specification.length" v-if="showTd(specIndex, index)" :key="n" :rowspan="countSum(n)">
								{{getSpecAttr(specIndex, index)}}
							</td>

							<td>
								<input class="input priceInput"   type="text" v-model.number="productArray[index].productPrice"
								 placeholder="输入价格"  />
							</td>
							<td style="justify-content: center;display: flex; align-items: center;padding: 4px 10px;height: 41px;">
								<div >
									<input class="input stockInput" type="text" v-model.number="productArray[index].productStock"
									 placeholder="上传图片"  />
									<img width="30px" src="img/del.png"  />
								</div>
								<div>
									<a name="uploadFile" class="uploadFile" href="javascript:;">[上传文件]</a>
									<input  name="myFile" value="上传图片" type="file" accept="application/vnd.ms-excel" style="display: none"/>
								</div>
							</td>
						</tr>
					</tbody>
					
				</table>
				<!-- <input id="seach" value="123" /> -->
			</div>
			<div>
				<button class="addSkuBtn" :disabled="productArray.length<1" @click='submit'>提交<button>
			</div>
			<div id="div_1" style="margin-top: 20px; display: none;">
				<h3>规格项目</h3>
				<pre id="specificationdataData"></pre>
			</div>
			<div id="div_2" style="margin-top: 20px; display: none;">
				<h3>属性阵列</h3>
				<pre id="productArrayData"></pre>
			</div>
		</div>
		<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/index.js"></script>
		
		<script>
		    $(document).on('click', '.uploadFile', function(e) {
		     var value = $(this).parents("div").prev().children("input");
				value.val("OK")
				console.log(value.val()); 
		     });
		</script>
	</body>
</html>
